<template>
  <yy-paging v-model="dataList" @query="queryList" ref="paging" :auto="automatic" @scroll="scroll" :refresher-enabled="false">
    <template #top>
      <u-navbar
        back-text=""
        :is-back="true"
        title="定位"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
      </u-navbar>
    </template>
    <view class="p-4">
      <view class="flex gap-3 items-center">
        <view class="flex flex-none gap-1 items-center" @click="vk.navigateBack()">
          <view class="text-[#606368]">
            {{ city }}
          </view>
          <image src="/static/iconDownGr@3X.png" class="size-[12px]" mode="scaleToFill" />
        </view>
        <view class="flex-1">
          <u-search placeholder="输入详细地址" :show-action="false" v-model="keyword"></u-search>
        </view>
      </view>
    </view>
  </yy-paging>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        city: '',
        keyword: ''
      }
    },
    onLoad(options) {
      this.city = options.city
    },

    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([1, 1, 1])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
